<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#4b535b"
    text-color="#fff"
    active-text-color="#ffd04b"
    router>
    <span style="font-size: 1.25em;display: block;position: absolute;left: 45%;top: 20%;color: dodgerblue">后台管理</span>
      <el-menu-item index="1" route="/main/">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">{{this.$store.state.user.username}}</template>
        <el-menu-item index="2-1" route="a">设置</el-menu-item>
        <el-menu-item index="2-2" route="a">个人中心</el-menu-item>
        <el-menu-item index="2-3" @click="loginOut" route="/login">退出</el-menu-item>
      </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    name: "Top-navbar",
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      loginOut(){
        localStorage.removeItem("user")
      }
    }

  }
</script>

<style scoped>
  .el-submenu{
    float: right;
  }
</style>
